import { s_getcommontableinfoBycondition, s_updateInfo } from "@/services/basis";
import { ProCard, ProForm } from "@ant-design/pro-components";
import { Button, Card, Col, GetProp, List, message, Row, Upload, UploadProps,Image, Space, Modal } from "antd";
import { useState } from "react";

const App:React.FC<{source_xid:number,setData:any,fdata:any,type:number}>=(props)=>{
    //参数1：source_xid,setData：主调useState函数回传,type:1查看，2编辑，fdata:如下
   // 参数2：fdata:源表source_table,源source_id,源字段source_field,源单据号/编号source_code,源值source_value
    //注意：source_table需以addition_为前缀
    // 操作类型（1查看或2编辑）type
    // 为方便，仅支持图片和PDF两种类型
    const [fileInfo,setFileInfo]=useState("");
    const [filename,setFilename]=useState("");
    const [itemList,setItemList]=useState(props.fdata==null||props.fdata.source_value==''?[]
                                        :JSON.parse(props.fdata.source_value));
    const [open,setOpen]=useState(false);

    const {source_table,source_id,source_field,source_value,source_code}=props.fdata;
    const {source_xid,type}=props;

   //  alert(JSON.stringify(props.fdata));
   //  async function getAddition(){
   //       //source_table:以addition_前缀
   //       const x=await s_getcommontableinfoBycondition({x_id:source_xid,source:source_table,
   //                       tdata:{id:source_id,field:source_field}});
   //       alert(JSON.stringify(x.data[0][0]));             
   //       const y=x.data[0][0];
   //       //   alert(JSON.stringify(x.data[0][0]));
   //       //返回附件清单
   //        setItemList(y==null?[]:JSON.parse(y));
   //      }

      async function operateItem(type:number,item2:string){
        var temp=[...itemList];
        if(type==1)
            temp.push(item2);
         else
            temp=temp.filter((item:string)=>item!=item2)
           
        const fdata={id:source_id,field:source_field,addition:temp};
       //  source,x_id,operater_id,etype,fdata
        const x=await s_updateInfo({source:source_table,x_id:source_xid,operater_id:1,etype:1,fdata}); 
        if(x.success){
            message.success('调整附件成功');
            setItemList(temp);
        }else
            message.error('调整附件失败，请联系管理员');
     }
    
     //限制上传文件类型
     type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
     const beforeUpload = (file: FileType) => {
         const  sufix=file.name.substring(file.name.indexOf('.')+1);
         const isPicture = sufix.toLowerCase() === 'jpg' || sufix.toLowerCase() === 'jpeg'
                || sufix.toLowerCase() === 'bmp'|| sufix.toLowerCase() === 'png'|| sufix.toLowerCase() === 'pdf';
         if (!isPicture) {
              message.error('错误！只可以导入图片（jpg/jpeg/bmp/png）或PDF文件!');
         }
         const isLt2M = file.size / 1024 / 1024 < 10;
         if (!isLt2M) {
              message.error('错误！要导入的文件必须小于10MB!');
         }
         return  isPicture&&isLt2M;
         };
    
         return (<>
            <Button onClick={()=>setOpen(true)} disabled={source_code==''||source_code==undefined?true:false}>附件管理</Button>
            <Modal open={open} closable destroyOnClose onCancel={()=>setOpen(false)} onClose={()=>setOpen(false)}
               okButtonProps={{hidden:true}} cancelButtonProps={{hidden:true}} width={'80%'}>
            <ProCard title='附件管理' style={{height:800}}>
            <ProForm submitter={false} style={{height:576}}  layout="horizontal" labelAlign="left" labelCol={{offset:0,span:5}}>
                                   <Space hidden={type==1?true:false}>
                                     <Upload
                                       name='upfile'
                                       action='/basis_api/upload/file/htoms2'
                                       beforeUpload={beforeUpload}
                                       data={props.fdata==null?{}:{x_id:source_xid,operater_id:1,source:source_table,
                                               tdata:JSON.stringify({id:source_id,code:source_code,field:source_field})}}
                                       onChange={(info)=>{
                                            if(info.file.status=='done'){
                                                 message.success('文件上传成功！')
                                               //   alert(info.file.name);
                                                 var t=[...itemList];
                                                 t.push(info.file.name);
                                                 setItemList(t);
                                                 props.setData(t);//回传数据
                                              };
                                            if(info.file.status=='error')
                                                 message.error('文件上传失败'+info.file.error);
                                              }}
                                          >
                                              <Button style={{width:200}}>上传附件(限图片或PDF)</Button>
                                     </Upload>
                                     </Space>
                                   {itemList}
                                 <Row gutter={8}>
                                     <Col span={6}>
                                     <Card title='附件列表'  style={{height:700}}>
                                            <List
                                               dataSource={itemList}
                                               renderItem={(item:string,index)=>{
                                                  return <List.Item
                                                         onClick={async ()=>{
                                                        //   调用源文件并显示
                                                        //文件默认统一存放在c:/additions下,需拼接文件路径（不含前缀）
                                                        //样品路径：c:/additions+组织ID+sample/样品编号/步骤序号/文件名
                                                        //其他文件路径：c:/additions+组织ID+主表名+单据号/编号+文件名
                                                        //  const filename0='c:/additions/'.concat('1','/sample/',props.pindata.code,'/',props.stepno.toString(),'/',item);
                                                        var filename0='';
                                                         //通用目录
                                                        filename0='c:/additions/'.concat(source_xid.toString(),
                                                                         '/',source_table.substring(9) ,'/',source_code,'/',item);
                                                         
                                                        //  const x=await s_getFileInfo({filename:filename0}); 
                                                            setFileInfo('/basis_api/file/get?filename='+filename0);
                                                           //  alert(filename0);
                                                        //  alert('/basis_api/file/get?filename='+filename0)
                                                            setFilename(item);
                                                         }}
                                                       >
                                                        <span style={{width:'75%'}}>{item}</span> 
                                                               <Button  hidden={type==1?true:false}
                                                                    onClick={(e)=>{
                                                                         e.preventDefault();
                                                                         operateItem(2,item);
                                                                         props.setData(itemList);//回传数据
                                                                  }}>删除</Button>
                                                   
                                                         </List.Item>
                                                       }}
                                            />
                                        </Card>
                                     </Col>
                                      <Col span={18}>
                                        <Card title='文档预览' style={{height:700}}>
                                         {filename.toLowerCase().indexOf(".pdf")<=0?
                                           <Image src={fileInfo} style={{ width: '100%', height: 400 }} /> 
                                          :<iframe
                                               title="PDF预览"
                                                style={{ width: '100%', height: 400 }}
                                                src={fileInfo}
                                            />
                                         } 
                                        </Card>
                                     </Col>
                                 </Row>
                           </ProForm>
                           </ProCard>
                     </Modal>
         </>);
}

export default App;